@import '~styles/vars';

.card {
  position: relative;
  width: calc(50% - 5px);
  margin: 0 0 10px;
  border-radius: 7px;
  overflow: hidden;

  &:nth-child(odd) {
    margin-right: 5px;
  }

  &:nth-child(even) {
    margin-left: 5px;
  }

  img {
    width: 100%;
    height: 100%;
    min-height: 275px;
  }

  .meta {
    position: absolute;
    bottom: 0;
    left: 0;
    color: $color-white;
    padding: 5px 10px 10px;
    background-image: linear-gradient(
      to bottom,
      rgba($color-black, 0),
      rgba($color-black, 0.5)
    );

    header {
      font-style: italic;
      font-size: 16px;
      text-shadow: 0 0 1px $color-black;
    }
  }
}
